<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>员工列表</title>
    <script src="../js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <link href="../css/bootstrap.css" rel="stylesheet">
    <script src="../js/bootstrap.js" type="text/javascript"></script>

</head>
<body>
<!--标题-->
<div class="container">

    <div class="col-md-12">
        <h1 class="text-muted bg-info">员工管理</h1>
        <hr/>
    </div>

</div>
<!--标题结束-->

<!--查询输入框-->
<div class="container">
    <div class="col-md-2">
        <input class="input-group" type="text">
    </div>
    <div class="col-md-2">
        <button class="btn btn-default" type="button">
            <span class="text-center">查询</span>
        </button>
        <button class="btn btn-primary" type="button">
            <span class="text-center">新建</span>
        </button>
    </div>
    <!-- 按钮 -->
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
        </div>
    </div>
</div>
<!--查询输入框结束-->

<div class="container">

    <div class="col-md-12">
        <table class="table table-hover" id="emps_table">
            <thead>
            <tr>
                <th>
                    <input id="check_all" type="checkbox"/>
                </th>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>邮箱</th>
                <th>部门</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div>
</div>
<div class="container" id="page_nav">
    <div class="row">
        <div class="col-md-4">
            <span id="page_text"></span>
        </div>
        <div class="col-md-4 col-md-offset-8">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="page_nav_li">

                </ul>
            </nav>
        </div>
    </div>
</div>
<script>
    var currentPage;
    $(function () {
        toPage(1)
    });

    function toPage(pn) {
        $.ajax({
            url: "/crud/emps",
            data: "pn=" + pn,
            type: "GET",
            success: function (result) {
                console.log(result);
                currentPage=result.current;
                //1、解析并显示员工数据
                build_emps_table(result);
                //2、解析并显示分页信息
                build_page_info(result);
                //3、解析显示分页条数据
                build_page_nav(result);
            }
        })
    }
    //构建列表
    function build_emps_table(result) {
        //清空table表格
        $("#emps_table tbody").empty();
        var emps = result.records;
        $.each(emps, function (index, item) {
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender == 'M' ? "男" : "女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.deptName);
            /**
             <button class="">
             <span class="" aria-hidden="true"></span>
             编辑
             </button>
             */
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
            //为编辑按钮添加一个自定义的属性，来表示当前员工id
            editBtn.attr("edit-id", item.empId);
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            //为删除按钮添加一个自定义的属性来表示当前删除的员工id
            delBtn.attr("del-id", item.empId);
            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            //var delBtn =
            //append方法执行完成以后还是返回原来的元素
            $("<tr></tr>").append(checkBoxTd)
                .append(empIdTd)
                .append(empNameTd)
                .append(genderTd)
                .append(emailTd)
                .append(deptNameTd)
                .append(btnTd)
                .appendTo("#emps_table tbody");
        });
    }
// 解析并显示分页数据
   function build_page_info(result){
       $("#page_nav #page_text").empty();
    var t="当前为第"+result.current+"页,总"+result.pages+"页,总"+result.total+"条数据"

       $("#page_nav #page_text").append($("<sapn></sapn>").append(t));
   }
//   显示分页条
    function build_page_nav(result){
        $("#page_nav #page_nav_li").empty()
        var list=[];
        if(result.current<3){
            for(let i=1;i<=5;i++)
                list.push(i);
        }
        else if(result.pages-result.current<3){
            for(let i=result.pages-5;i<=result.pages;i++){
                list.push(i);
            }
        }
        else {
            for(let i=result.current-2;i<=result.current+2;i++){
                list.push(i);
            }
        }
        var pre=($("<li></li>").append($("<a></a>").append("&laquo;")));
        pre.click(function (){
            toPage(result.current-1)
        })
        if(result.current>1)
        $("#page_nav #page_nav_li").append(pre)

        for(let i=0;i<list.length;i++){
                var n=$("<li></li>").append($("<a></a>").append(list[i]));
                n.click(function (){
                    toPage(list[i])
                })
                if(result.current==list[i])
                    n.addClass("active");
                $("#page_nav #page_nav_li").append(n);
        }
        var next=$("<li></li>").append($("<a></a>").append("&raquo;"));
        next.click(function (){if(result)
            toPage(result.current+1)
        })
        if(result.current<result.pages)
        $("#page_nav #page_nav_li").append(next);

    }
    //删除一个
    // $(".delete_btn").click(function (){
    $(document).on("click",".delete_btn",function(){
        //1、弹出是否确认删除对话框
            var empName = $(this).parents("tr").find("td:eq(2)").text();
            var empId = $(this).attr("del-id");
            if(confirm("确认删除【"+empName+"】吗？")){
                //确认，发送ajax请求删除即可
                delete_selected(empId);
        }
    })
    //完成全选/全不选功能
    $("#check_all").click(function(){
        //attr获取checked是undefined;
        //我们这些dom原生的属性；attr获取自定义属性的值；
        //prop修改和读取dom原生属性的值
        $(".check_item").prop("checked",$(this).prop("checked"));
    });

    //check_item
    $(document).on("click",".check_item",function(){
        //判断当前选择中的元素是否5个
        var flag = $(".check_item:checked").length==$(".check_item").length;
        $("#check_all").prop("checked",flag);
    });
    //删除多个
    // $(".delete_btn").click(function (){
    $(document).on("click","#emp_delete_all_btn",function(){
        var id_l="";
        var name_l="";
        //1、弹出是否确认删除对话框
        $.each($(".check_item:checked"),function (){
            var empId=$(this).parents("tr").find("td:eq(1)").text()
            var empName = $(this).parents("tr").find("td:eq(2)").text();
            empId=empId+"-"
            id_l=id_l+empId
            name_l+=empName+","
        })
        console.log(name_l)
        if(name_l.length<2)id_l.replace("-","")
        if(confirm("确认删除【"+name_l+"】吗？")){
            //确认，发送ajax请求删除即可
            delete_selected(id_l);
        }
    })
    function delete_selected(ids){
        $.ajax({
            url: "/crud/del/"+ids,
            type: "DELETE",
            success:function (result){
                alert("删除成功！");
                //回到本页
                toPage(currentPage);
                console.log(result)
            }
        })
    }
</script>
</body>

</html>
